<%= javascript_include_tag "motorcade_maps" %>
<%= stylesheet_link_tag "motorcade_maps", "maps" %>
<%= javascript_include_tag "maps", "searchInRectangle", "my97DatePicker/WdatePicker" %>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

<div id="notice" class="notice"><%= notice %></div>
<%# 查询区域 %>
<div style="padding-top:10px;padding-bottom:10px;" class="search-form">
  <%= label_tag (t 'activerecord.attributes.motorcade.vehicle_no'), nil %>
  <input type="text" id="vehicle_no">
  <%= label_tag (t 'activerecord.attributes.motorcade.driver_name'), nil %>
  <input type="text" id="driver_name">
  <%= label_tag (t 'activerecord.attributes.motorcade.group'), nil %>
  <%= select(:group, :string, @groups.collect { |group| [group] }) %>
  <label style="width:60px;"><%= t 'activerecord.attributes.motorcade.destination_name' %></label>
  <input type="text" id="destination_name">
  <%= link_to (t 'activerecord.attributes.motorcade.vehicle_seach'), "#", {:class => "inline-block s-btn query-btn", :onClick => 'vehicle_search()', :id => "query-vehicle"} %>

</div>

<%# 内容区域, 包括地图和查询结果 %>
<div class="cargo-map clearfix" id="map" style="height:550px;position: relative;background: #fff">
  <div class="inline-block clearfix vtop" id="mapC" style="width:100%;float:left;">
<%# 工具栏 %>
    <div id="tools" class="tools clearfix" style="position: static; background-color: #F5F8F9">
    <span class="inline-block vmiddle" style="width:35%;height:30px;line-height:30px;text-indent:10px;">
      <a class="op-btn vmiddle" href="javascript:fullMap();" id="fullMapBtn"><img src="/assets/full_screen.png"><%= t 'activerecord.attributes.cy_map.full_screen' %>
      </a>
         <a class="op-btn vmiddle" style="display: none" href="javascript:exitFullMap();" id="exitFullMapBtn"><img src="/assets/full_screen_close.png">退出全屏
         </a>
      <a id="select_vehicle_in_view" href="javascript:void(0);" onclick="queryVehicleInView();" style="margin-left:3px;"><%= t 'activerecord.attributes.motorcade.select_vehicles_in_view' %></a>
        &nbsp;&nbsp;
        <a id="select_by_rectangle" href="javascript:void(0);" onclick="search_in_rectangle()"><%= t 'activerecord.attributes.motorcade.select_by_rectangle' %></a>
    </span>
    </div>

    <%# 地图、车辆结果显示区域%>
    <div class="clearfix" style="position: relative;">
      <table cellpadding="0" cellspacing="0" style="table-layout: fixed;">
        <tr>
          <%# 地图 %>
          <td class="map-border">
            <div id="map_container" style="height:500px;width:700px;float:left">
              <p style="margin: 20px;font-size: 15px;"><%= t 'activerecord.attributes.shiper_map.map_loading' %></p>
            </div>
          </td>
          <%# 查询结果区 %>
          <td>
            <div id="rst_info_view" class="vtop" style="width:296px;height:500px;overflow:hidden;">
              <%= render '/utils/vehicles' %>
            </div>

          </td>
        </tr>
      </table>
      <%# --遮蔽物--start-- %>
      <div class="shelter" style="width:100%; height:100%;float:left;">
        <div align="center" style="margin-top: 50px">
          <img src="/assets/loading_big.gif" class="shelter_pic"/>

          <p id="shelter_msg" style="font-size: 20px;color: white;opacity: 1;"></p>
        </div>
      </div>
      <%# --遮蔽物--end-- %>
    </div>


    <%# 浮动信息框 %>
    <div class="detailWin">
      <div style="margin-top:5px;">
        <label><b><%= t 'activerecord.attributes.motorcade.vehicle_no' %></b></label>
        <label id="vehicle_no_show" style="width:65px" class="content_label"></label>
        <label style="width:30px"><b><%= t 'activerecord.attributes.motorcade.driver_name' %></b></label>
        <label id="driver_name_show" style="width:50px" class="content_label"></label>
        <label style="width:30px"><b><%= t 'activerecord.attributes.motorcade.group' %></b></label>
        <label id="groups_show" style="width:65px;" class="content_label"></label>
      </div>
      <div>
        <label><b><%= t 'activerecord.attributes.motorcade.phone' %></b></label>
        <label id="driver_phone_show" style="width:100px" class="content_label"></label>
        <label style="width:30px"><b><%= t 'activerecord.attributes.motorcade.vehicle_type' %></b></label>
        <label id="vehicle_type_show" style="width:110px" class="content_label"></label>
      </div>
      <div>
        <label><b><%= t 'activerecord.attributes.motorcade.destination_name' %></b></label>
        <label id="destination_show" style="width:240px" class="content_label ellipsis"></label>
      </div>
      <div>
        <label style="display: block;float: left;"><b><%= t 'activerecord.attributes.motorcade.ctn_location' %></b></label>
        <label id="address_show" style="width: 135px;text-align: left;margin-left: 3px;" class="content_label"></label>
      </div>
      <div>
        <label><b>速度</b></label>
        <label id="speed_show" style="width:90px" class="content_label"></label>

      </div>
    </div>

  </div>
</div>

<%# 车辆历史轨迹查询弹出框 %>

<!-- 时间选择框 -->
<div class="time-range-win" style="right: 9px;width: 340px;height:165px;">
  <a href="###" class="close" onclick="close_motor_his_win();"><img src="/assets/close.png" alt=""/></a>

  <div class="title">历史轨迹</div>
  <div class="time-range-content" style="margin-top: 15px;">
    <div style="margin-left: 10px;margin-bottom: 15px;">
      <a href="###" id="past-24-hours" class="inline-block s-btn time-btn" onclick="today_history();return false;" style="margin-left: 0px;">24小时</a>
      <a href="###" id="past-one-week" class="inline-block s-btn time-btn" onclick="week_history();return false;">近一周</a>
      <a href="###" id="past-one-month" class="inline-block s-btn time-btn" onclick="month_history();return false;">近一月</a>
      <a href="###" class="inline-block s-btn time-btn" onclick="sureToQueryHistory();return false;">确定</a>
    </div>
    <div style="margin-left: 10px;margin-top: 10px;">
      <label style="margin-left:0;text-indent: 0;">起始日期</label>
      <input type="text" class="time-input" id="start_time" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate">
    </div>
    <div style="margin-left: 10px;margin-top: 10px;">
      <label style="margin-left:0;text-indent: 0;">截止日期</label>
      <input type="text" class="time-input" id="end_time" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="Wdate">
    </div>
  </div>
</div>
